<template>
    <div class="left">
        <div class="body-header"></div>
        <div class="menu-box">
            <div class="title">游戏大厅</div>
            <div class="menu-list">
                <div class="menu-item" @click="handleRedirect('/index/userlist')">用户列表</div>
                <div class="menu-item" @click="handleRedirect('/index/match')">比赛记录</div>
                <div class="menu-item" @click="handleRedirect('/index/rule')">比赛规则</div>
            </div>
        </div>
        <div class="date-box">
            <div class="time">{{dateData.time}}</div>
            <div class="date">{{dateData.date}}</div>
        </div>
    </div>
</template>

<script setup>
    import {reactive, onMounted} from 'vue';
    import {useRouter} from 'vue-router';

    const router = useRouter();
    const dateData = reactive({
        date: '',
        time: ''
    });
    onMounted(() => {
        getDate();
    });
    //获取日期与时间
    const getDate = () => {
        const date = new Date();
        let minute = date.getMinutes();
        dateData.date = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
        dateData.time = `${date.getHours()}:${minute < 10 ? '0' + minute : minute}`;
        window.setTimeout(() => {
            getDate();
        }, 1000);
    };
    //跳转页面
    const handleRedirect = async (url) => {
        await router.push(url);
    }
</script>

<style scoped lang="less">
    .left {
        width: 200px;
        background: rgba(155, 141, 128, 1);
        position: relative;
        border-right: 2px solid rgba(155, 141, 128, 1);

        .body-header {
            height: 28px;
            background: #fff;
        }

        .menu-box {
            text-align: center;
            position: relative;
            padding-top: 5px;

            .menu-list {
                .menu-item {
                    height: 40px;
                    line-height: 40px;
                    color: #fff;
                    background: rgba(184, 181, 174, 1);
                    font-size: 12px;
                    margin-bottom: 5px;
                    cursor: pointer;
                }
            }

            .title {
                position: absolute;
                font-size: 12px;
                width: 80px;
                background: rgba(155, 141, 128, 1);
                height: 24px;
                line-height: 24px;
                color: #ffff;
                top: -24px;
                left: 3px;
                -webkit-border-top-left-radius: 3px;
                -moz-border-top-left-radius: 3px;
                border-top-left-radius: 3px;
                -webkit-border-top-right-radius: 3px;
                -moz-border-top-right-radius: 3px;
                border-top-right-radius: 3px;
            }
        }

        .date-box {
            position: absolute;
            bottom: 10px;
            text-align: center;
            width: calc(100% - 20px);
            background: rgba(184, 181, 174, 1);
            padding: 10px 0;
            color: #fff;
            margin: 0 10px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;

            .time {
                font-size: 24px;
            }

            .date {
                margin-top: 5px;
                font-size: 12px;
            }
        }
    }
</style>